@extends('layouts.back_stage')
@section('content') 
  <style>
  #app{padding:20px}
  [v-cloak] {display: none;}
  .type_x{margin:30px 0 10px 20px;}
  .ingred_sel{width:300px;margin:0 10px 0 10px}
  .input_add{width:300px;margin-left:10px;}
  .add_s{margin:20px 0 0 20px}
  .back{background:#fff;margin:10px 10px  10px 10px;padding:10px}
  .addsert{font-weight:500;margin:20px 0 10px 30px}
  .caser{width:300px}
  .tab_show{margin:20px 0 20px 20px}
  .bank_account{width:300px}
  .el-input__inner{width:300px}
  ::-webkit-scrollbar {height: 8px;}
  </style>
  <div class="container">
      <div style="padding:20px 20px 0px 0;overflow:hidden;"><h3 style="float:left;">添加加工厂</h3></div>
      <div class="page-body" id="app" v-cloak>
      <el-form  ref="ruleForm" v-model="ruleForm"   class="demo-ruleForm">
         <div class="header"><h3>客户基本信息</h3></div>
         <div class="back">
          <div class="type_x">
            <!-- <label> &nbsp;&nbsp;&nbsp;类型:</label> -->
            <!-- <select class="ingred_sel one"  v-model="ruleForm.type" name="supplier">
                <option value="">请选择</option>  
                <option value="1">代理商</option>                                      
                <option value="2">分公司</option>                                                                     
              </select> -->
              <!-- <label> &nbsp;&nbsp;&nbsp;类型 &nbsp;&nbsp;</label>
                    <el-select  size="small" v-model="aelect_type" @change="typeValue">
                        <el-option   :value=0 label="代理商"> 代理商</el-option>
                        <el-option   :value="1" label="分公司" > 分公司</el-option>
                        <el-option   :value="2" label="客户" > 客户</el-option>
               </el-select> -->
            <!-- <label>所属机构:</label>
              <select class="ingred_sel two" v-model="ruleForm.pid" name="supplier">
                  <option value="">请选择</option>  
                  <option value="1">大品</option>                                      
                  <option value="2">中品</option>
                  <option value="3">小品</option>                                                               
              </select> -->
            <label>客户名称：</label>
                <el-input  class="ingred_sel" v-model="ruleForm.name" size="small" maxlength="10"  placeholder="请输入名称"></el-input>
              </div>  
              <div class="add_s">
            <label>手机号码：</label>
              <el-input  class="ingred_sel" v-model="ruleForm.tel" size="small" maxlength="11" placeholder="请输入1开头的11位数"></el-input>
          </div>
          <div class="add_s">
            <label>省市区： &nbsp;&nbsp; &nbsp;</label>
            <el-cascader
                :options="options"
                class='caser'
                size="small"
                change-on-select
                v-model="ruleForm.area"
                @focus="handleChange">
              </el-cascader>
            </div>
            <div class="addsert">
            <span>
            <label>地址： &nbsp;&nbsp;</label>
                <el-input  class="input_add on"  maxlength="30"  v-model="ruleForm.address" size="small" placeholder="请输入:详细地址"></el-input>
            </span>  
            </div>
        </div>
        <div class="header"><h3>其他信息</h3></div>
        <div class="back">
            <div class="type_x">
               
                  <label>银行账号:&nbsp;&nbsp;&nbsp;</label>
                  <el-input   class="bank_account" maxlength="19"  v-model="ruleForm.bank_account" size="small" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"  placeholder="请输入:16 或 19 位数字"></el-input>
              </div>
              <div class="tab_show">
                    <label>合同时间:&nbsp;&nbsp;&nbsp;</label>
                    <el-date-picker
                      size="small"
                        v-model="ruleForm.starta"
                        type="datetimerange"
                        value-format="yyyy-MM-dd  hh:mm:ss"
                        :start-placeholder="ruleForm.start"
                        :end-placeholder="ruleForm.end"
                        :default-time="['12:00:00']">
                        </el-date-picker>
                    
               </div>
        </div>
        <el-form-item>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <el-button type="primary" class="rest" @click="formSubmit" :disabled="isSub" size="small">立即创建</el-button>
                   <el-button  size="small"  type="primary" @click="resetForm" >重置</el-button>
        </el-form-item>
       </el-form>
      </div>
  </div>
 <script>
   new Vue({
        el: '#app',
        data() {     
         return {  
          options: [],
         // value6: '',
         aelect_type:'',
          ruleForm:{
            type:'',
            pid:'',
            starta:'',
            name:'',
            tel:'',
            address:'',
            area:[],
            area_bh:[],//装省市区最后一个id
            bank_account:'',//银行账号
            start:'',//开始时间 
            end:''//结束时间 
          },
           options: [],
           isSub:false,
       
            };
          },
       methods: {
        typeValue(val){
             // console.log(11111,val)
              this.ruleForm.type=val
            },
        handleChange(value) {
        //console.log(111,value);
        const that=this;
            $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
               })
             },
             //重置重置
             resetForm(){
               // console.log(222,this.ruleForm)
                this.ruleForm='',
                this.$notify({
                title: '成功',
                message: '重置清空成功',
                type: 'success'
              });

             },
             formSubmit(){
                 let that=this
                 for(var e in this.ruleForm.area){   
                 }
                  this.ruleForm.area_bh=this.ruleForm.area[e]
                
          
                if(this.ruleForm.name==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入名称",
                    });
                    return false;
                }  
                if(this.ruleForm.tel==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入手机号码",
                    });
                    return false;
                } 
                var moder=/^1\d{10}$/ 
                if(!moder.test(this.ruleForm.tel)){
                  this.$message({
                      message: '手机号码格式有问题 请输入以1开头的11位数',
                      type: 'warning'
                    });
                    return false;
                }

                if(this.ruleForm.area==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请选择省市区",
                    });
                    return false;
                }  
                if(this.ruleForm.address==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入详细地址",
                    });
                    return false;
                }  
                // if(this.ruleForm.bank_account==''){
                //     this.$notify.error({
                //         title: '提示',
                //         message: "请输入银行账号",
                //     });
                //     return false;
                // }  
                if(this.ruleForm.bank_account!=''){
                    var number=/^(\d{16}|\d{19})$/ 
                    if(!number.test(this.ruleForm.bank_account)){
                    this.$message({
                        message: '账号位数不对 请输入16位 或 19位的账号',
                        type: 'warning'
                        });
                        return false;
                    }
                }
                
                //  if(this.ruleForm.start==''){
                //     this.$notify.error({
                //         title: '提示',
                //         message: "请选择合同时间",
                //     });
                //     return false;
                // }  
                // if(this.ruleForm.end==''){
                //     this.$notify.error({
                //         title: '提示',
                //         message: "请选择结束时间",
                //     });
                //     return false;
                // }  
                for(var  i  in that.ruleForm.starta){
                    console.log(222,i)
                    that.ruleForm.start=that.ruleForm.starta[0]
                    that.ruleForm.end=that.ruleForm.starta[1]
                }
                that.isSub=true;
                   $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:"post",
                    url:"/supplier/store",
                      data:this.ruleForm,
                    success: function (res) {
                     if(res.result.success==true){
                          that.$notify.success({
                                title: '提示',
                                message: '新增提交成功',
                            });
                           
                     window.location.href = "/supplier/showpage";
                     that.isSub=false;
                     }else{
                        that.$message({
                                title: '提示',
                                message: res.result.errorMsg,
                            });
                            that.isSub=false;
                       }
                    } 
                 });  
                

                  
             },
        },
        mounted() {
            this.handleChange();
        },
   });   
 
 </script>

@endsection